//管理员管理
<template>
	<div>
		<!-- 添加 -->
		<div class="right margin-bottom">
			<div class="searchArea flex">
				<el-form ref="serachForm" :model="searchForm" :inline="true">
					<el-form-item prop="employeeNo">
						<el-input v-model="searchForm.employeeNo" clearable placeholder="工号">
						</el-input>
					</el-form-item>
					<el-form-item prop="addrealName">
						<el-input v-model="searchForm.addrealName" clearable placeholder="账号">
						</el-input>
					</el-form-item>
					<el-form-item prop="mobile">
						<el-input v-model="searchForm.mobile" clearable placeholder="手机号">
						</el-input>
					</el-form-item>
					<el-form-item prop="mValue" label="供应商">
						<el-select v-model="searchForm.mValue" filterable clearable placeholder="请选择">
							<el-option
							v-for="item in downLoadForm.AllSlist"
							:key="item.id"
							:label="item.menuName"
							:value="item.menuName"
							></el-option>
						</el-select>
						</el-form-item>
					
					<el-form-item prop="action">
						<el-button size="medium" type="primary" @click='getLogsList'>搜索</el-button>
					</el-form-item>
					<el-form-item prop="action">
						<el-button size="medium" type="primary" icon="el-icon-plus" @click="addPopup=true">添加AML人员</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!-- 列表 -->
		<el-table :data="dataList" v-loading="loading" :row-class-name="tableState" border height="700" style="margin-top:15px">
			<el-table-column prop="employeeNo" label="工号" align="center">
			</el-table-column>

			<el-table-column prop="account" label="账号" align="center">
			</el-table-column>

			<el-table-column prop="mobile" label="手机号" align="center">
			</el-table-column>

			<el-table-column prop="roleName" label="岗位" align="center">
			</el-table-column>

			<el-table-column prop="companyName" label="供应商" align="center">
			</el-table-column>

			<el-table-column prop="locked" label="状态" align="center">
				<template slot-scope="scope">
					<el-tag type="danger" v-show="scope.row.locked==true">冻结</el-tag>
					<el-tag type="success" v-show="scope.row.locked==false">开启</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="op" label="操作" fixed="right" width="450" align="center">
				<template slot-scope="scope">
				<el-button-group>
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="updateOpen(scope.row)"></el-button>
					<el-button v-if="scope.row.locked==true" size="mini" type="danger" @click="lock(scope.row)">开启</el-button>
					<el-button v-else size="mini" type="success" @click="lock(scope.row)">冻结</el-button>
					<!--
					<el-button size="mini" type="primary" @click="banding(scope.row)">绑定供应商</el-button>
					-->
					<el-button size="mini" type="primary" @click="openDetail(scope.row)">查看详情</el-button>
					<el-button size="mini" type="primary"  @click="planOpen(scope.row)">分配岗位</el-button>
				 </el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="page-box" style="text-align: center;">
			<el-pagination :total="Total" :current-page="CurrentPage" :page-size="PageSize" @size-change="SizeChange" @current-change="CurrentChange" :page-sizes="$pages" layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 修改用户 -->
		<el-dialog title="修改用户信息" :visible.sync="updatePopup" :close-on-click-modal="false" :close-on-press-escape="false" width="30%" style="text-align: center;">
			<el-form :model="updateForm" label-position="left" label-width="80px">
				<el-form-item label="工号" prop="employeeNo">
					<el-input v-model="updateForm.employeeNo" disabled auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
					<el-input v-model="updateForm.mobile" clearable auto-complete="off"></el-input>
				</el-form-item>
				<!-- 供应商 -->

				<el-form-item prop="menuId" label="供应商">
					<el-select v-model="updateForm.menuId" filterable clearable placeholder="请选择" style="width:100%">
						<el-option
						v-for="item in downLoadForm.AllSlist"
						:key="item.id"
						:label="item.menuName"
						:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				 
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="updatePopup = false">取 消</el-button>
				<el-button type="primary" @click="updateManage" :loading="updateLoading">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 查看详情 -->
		<el-dialog title="查看用户信息" :visible.sync="Detail" :close-on-click-modal="false" :close-on-press-escape="false" width="30%" style="text-align: center;">
			<el-form :model="updateInfo" label-position="left" label-width="80px">
				<el-form-item label="工号" prop="employeeNo" align="left">
					{{updateInfo.userInfo.employeeNo}}
				</el-form-item>
				<el-form-item label="账号" prop="account" align="left">
					{{updateInfo.userInfo.account}}
				</el-form-item>
				<el-form-item label="手机号" prop="mobile" align="left">
					{{updateInfo.userInfo.mobile}}
				</el-form-item>
				<el-form-item label="制造商名称" prop="menuName" align="left">
					{{updateInfo.menuInfo.menuName  }}
				</el-form-item>
				<el-form-item label="供应商网站" prop="menuWeb" align="left">
					{{updateInfo.menuInfo.menuWeb }}
				</el-form-item>
				<el-form-item label="公司性质" prop="companyNature" align="left">
					{{updateInfo.menuInfo.companyNature }}
				</el-form-item>
				<el-form-item label="公司行业" prop="companyTrade" align="left">
					{{updateInfo.menuInfo.companyTrade }}
				</el-form-item>
				<el-form-item label="主营产品" prop="companyProduct" align="left">
					{{updateInfo.menuInfo.companyProduct }}
				</el-form-item>
				<el-form-item label="公司地址" prop="companyAddres" align="left">
					{{updateInfo.menuInfo.companyAddres }}
				</el-form-item>
				<el-form-item label="公司电话" prop="companyTel" align="left">
					{{updateInfo.menuInfo.companyTel }}
				</el-form-item>
				<el-form-item label="联系人" prop="companyContact" align="left">
					{{updateInfo.menuInfo.companyContact }}
				</el-form-item>
				<el-form-item label="公司邮箱" prop="companyEmail" align="left">
					{{updateInfo.menuInfo.companyEmail }}
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 添加人员 -->
		<!-- 添加管理员 -->
		<el-dialog title="添加AML人员" :visible.sync="addPopup" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
			<el-form :model="addForm" label-position="left" label-width="80px">
				<el-form-item label="工号" prop="employeeNo">
					<el-input v-model="addForm.employeeNo" clearable auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="addrealName">
					<el-input v-model="addForm.addrealName" clearable auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="addmobile">
					<el-input v-model="addForm.addmobile" clearable auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="addaccount">
					<el-input v-model="addForm.addaccount" clearable auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="addpassword">
					<el-input type="password" v-model="addForm.addpassword" clearable auto-complete="off" show-password></el-input>
				</el-form-item>
				<!-- 角色 -->
				<el-form-item label="角色" prop="roleId">
					<el-select v-model="addForm.roleId" clearable style="width:100%">
						<el-option v-for="(role,index) in roleList" :key="index" :label="role.roleName" :value="role.id">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- 供应商 -->

				<el-form-item prop="bindMenu" label="供应商">
					<el-select v-model="addForm.menuId" filterable clearable placeholder="请选择" style="width:100%">
						<el-option
						v-for="item in downLoadForm.AllSlist"
						:key="item.id"
						:label="item.menuName"
						:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addPopup = false">取 消</el-button>
				<el-button type="primary" @click="addManage" :loading="addLoading">确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 绑定供应商 -->
		<el-dialog title="绑定供应商" :visible.sync="dialogBindFormVisible">
		<el-form :model="downLoadForm">
			<el-form-item prop="bindMenu" label="供应商">
				<el-select v-model="bindMenu" filterable clearable placeholder="请选择">
					<el-option
					v-for="item in downLoadForm.AllSlist"
					:key="item.id"
					:label="item.menuName"
					:value="item.id"
					></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogBindFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="bindMenuDialog">确 定</el-button>
		</div>
		</el-dialog>
		<!-- 权限 -->
		<el-dialog title="权限" :visible.sync="rolePopup" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
			<el-form :model="roleForm" label-position="left" label-width="80px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="roleForm.account" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<!-- 角色 -->
				<el-form-item label="角色" prop="roleId">
					<el-select v-model="roleForm.roleId" clearable style="width:100%">
						<el-option v-for="(role,index) in roleList" :key="index" :label="role.roleName" :value="role.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="rolePopup = false">取 消</el-button>
				<el-button type="primary"
						@click="roleListClick"
						:loading="roleLoading">确 定</el-button>
      		</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		LISTAMLUSER,AML_USER_DETAIL,UPDATE_USER_ROLE,
		DELETEAMLUSER,
		UPDATE_MANAGER,SUPPLIER_ALLLIST,
		AMLBINDNENU,LOCK_MANAGER_PWD,ADD_MANAGER
	} from '@/utils/api';
	import { formatDate } from '@/utils/validate.js';
	export default {
		data() {
			return {
				rolePopup:false,
				roleForm:{},
				roleList:[{id: 9, roleName: "供应商主管", roleKey: "AML", roleStatus: 1, department: "供应商"},
				{id: 10, roleName: "供应商专员", roleKey: "AML", roleStatus: 1, department: "供应商"}],
				bindMenu:'',
				menuList:'',//供应商列表
				downLoadForm:{
					AllSlist:[],
					menuKeyWord:''},
				userId:null,
				dialogBindFormVisible: false,
				searchForm: {
					mValue:null,
					companyName: "",
					realName: "",
					addrealName: "",
				},
				// 分页
				CurrentPage: 1,
				PageSize: 10,
				Total: 0,

				// 查询
				loading: false,
				dataList: [],
				// 添加
				addPopup: false,
				addLoading: false,
				addForm: {
					roleId:'',
					addaccount: '',
					addrealName: '',
					addmobile: '',
					addpassword: ''
				},
				// 修改
				updatePopup: false,
				updateLoading: false,
				updateForm: {
					id: '',
					account: '',
					realName: '',
					mobile: '',
					password:'',
					menuId:'',//回显标识
				},
				Detail: false,
				updateInfo: {
					menuInfo:{},
					userInfo:{}
				},
			}
		},
		filters: {
			formatDate(time) {
				var date = new Date(time * 1000);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		},
		created() {
			this.getManage()
			this.getAllList()
		},
		methods: {
			// 角色分配
			roleListClick() {
				this.roleLoading = true
				UPDATE_USER_ROLE({
					sysUserId: this.roleForm.id,
					sysRoleId: this.roleForm.roleId
				}).then(res => {
					this.roleLoading = false
					this.$message.success('操作成功')
					this.rolePopup = false
					this.getManage()
				})
			},
			// （启动弹窗）角色分配
			planOpen(_scopes) {
				this.rolePopup = true
				this.roleForm = _scopes
			},
			// (启动弹窗)修改管理员
			updateOpen(_scope) {
				this.updatePopup = true
				this.updateForm = _scope
			},
			getAmlDetail(row) {
				this.loading = true
				AML_USER_DETAIL({
					id:row.id
				}).then(res => {
					this.loading = false
					this.updateInfo.menuInfo = res.data.menuInfo 
					this.updateInfo.userInfo  = res.data.userInfo  
				})
				.catch(() => {})
			},
			getLogsList() {
				this.loading = true
				LISTAMLUSER({
						companyName: this.searchForm.mValue,
						employeeNo: this.searchForm.employeeNo,
						mobile:this.searchForm.mobile,
						account: this.searchForm.addrealName,
						pageNum: this.CurrentPage,
						pageSize: this.PageSize
					}).then(res => {
						this.loading = false
						this.dataList = res.data.list
						this.Total = res.data.total
					})
					.catch(() => {})
			},
			// （启动弹窗）解锁和锁定
			lock(_scopes) {
				this.$confirm(
						_scopes.locked == true ?
						'此操作将开启管理员, 是否继续?' :
						'此操作将冻结管理员, 是否继续?',
						_scopes.locked == true ? '开启管理员' : '冻结管理员', {
							type: 'warning',
							center: true
						}
					)
					.then(() => {
						LOCK_MANAGER_PWD({
							id: _scopes.id,
							locked: _scopes.locked == true ? 'false' : 'true'
						}).then(res => {
							this.$message.success('操作成功') // 操作成功
							this.getManage()
						})
					})
					.catch(() => {
						this.$message.info('取消操作') // 取消操作
					})
			},
			getAllList() {
				SUPPLIER_ALLLIST({
				}).then(res => {
					this.downLoadForm.AllSlist = res.data;
				});
			},
			// 添加管理员
			addManage() {
				if(this.$empty(this.addForm.addaccount)) {
					this.$message.error('请输入账号')
					return
				}
				if(this.$empty(this.addForm.addrealName)) {
					this.$message.error('请输入姓名')
					return
				}
				if(this.$empty(this.addForm.addmobile)) {
					this.$message.error('请输入手机号')
					return
				}
				if(this.$empty(this.addForm.addpassword)) {
					this.$message.error('请输入密码')
					return
				}
				if(this.$empty(this.addForm.roleId)) {
					this.$message.error('请选择角色')
					return
				}

				//校验 是否选择 供应商
				if(this.$empty(this.addForm.menuId)) {
					this.$message.error('请选择供应商')
					return
				}
 

				this.addLoading = true
				ADD_MANAGER({
					employeeNo:this.addForm.employeeNo,
					account: this.addForm.addaccount,
					pass: this.addForm.addpassword,
					realName: this.addForm.addrealName,
					mobile: this.addForm.addmobile,
					roleId:this.addForm.roleId,
					menuId:this.addForm.menuId
				}).then(res => {
					this.addLoading = false
					this.$message.success('操作成功')
					this.addPopup = false
					this.getManage()
				})
				this.addLoading = false
			},
			// 状态
			tableState({
				row
			}) {
				if(row.locked === true) {
					return 'danger-row'
				} else if(row.locked === false) {
					return 'success-row'
				}
				return ''
			},
			// 查询管理员
			getManage() {
				this.loading = true
				LISTAMLUSER({
						//					companyName: this.searchForm.companyName,
						//					companyNature: this.searchForm.companyNature,
						//					companyTrade: this.searchForm.companyTrade,
						pageNum: this.CurrentPage,
						pageSize: this.PageSize
					}).then(res => {
						console.log(res, '00000')
						this.loading = false
						this.dataList = res.data.list
						this.Total = res.data.total
						console.log(this.dataList, '000001')
					})
					.catch(() => {})

			},
			// 分页（当前页）
			CurrentChange(val) {
				this.CurrentPage = val
				this.getManage()
			},

			// 分页（每页条数）
			SizeChange(val) {
				this.PageSize = val
				this.getManage()
			},
			// (启动弹窗)删除
			updateDelete(_scope) {
				this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					DELETEAMLUSER({
						userId: _scope.id,
					}).then(res => {
						this.getManage()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			banding(row){
				this.userId=row.id
				this.dialogBindFormVisible=true
			},
			bindMenuDialog(){
				AMLBINDNENU({
					menuId: this.bindMenu,
					userId: this.userId
				}).then(res => {
					this.getManage()
					this.dialogBindFormVisible = false
				})
				this.$message({
					type: 'success',
					message: '成功绑定供应商'
				});
			},
			// (启动弹窗)查看详情
			openDetail(_scope) {
				this.Detail = true
				this.getAmlDetail(_scope)
			},
			// (启动弹窗)修改用户
			updateOpen(_scope) {
				this.updatePopup = true
				this.updateForm = _scope
			},
			// 修改用户信息
			updateManage() {
				if(this.$empty(this.updateForm.account)) {
					this.$message.error('请输入账号')
					return
				}
				if(this.$empty(this.updateForm.realName)) {
					this.$message.error('请输入真实姓名')
					return
				}
				if(this.$empty(this.updateForm.mobile)) {
					this.$message.error('请输入手机号')
					return
				}

				if(this.$empty(this.updateForm.menuId)) {
					this.$message.error('请选择供应商')
					return
				}
			 
				this.updateLoading = true
				UPDATE_MANAGER({
					id: this.updateForm.id,
					mobile: this.updateForm.mobile,
					menuId: this.updateForm.menuId
				}).then(res => {
					this.updateLoading = false
					this.$message.success('修改成功')
					this.updatePopup = false
					this.getManage()
				})
				this.updateLoading = false
			},
		}
	}
</script>
<style scoped>
	.searchArea {
		width: 100%;
		margin-top: 15px;
		justify-content: flex-start;
	}
	
	.dialog-footer {
		text-align: center;
	}
</style>